<template>
  <el-main>
    <el-alert title="感谢Vue3.0版本的vue.draggable.next拖拽组件 https://github.com/SortableJS/vue.draggable.next" type="success" style="margin-bottom: 20px"></el-alert>
    <div class="dragList">
      <draggable v-model="listA" animation="200" item-key="id" group="people">
        <template #item="{ element }">
          <div class="item">{{ element.text }}</div>
        </template>
      </draggable>
    </div>
    <div class="dragList">
      <draggable v-model="listB" animation="200" item-key="id" group="people">
        <template #item="{ element }">
          <div class="item">{{ element.text }}</div>
        </template>
      </draggable>
    </div>
  </el-main>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  name: 'drag',
  components: {
    draggable,
  },
  data() {
    return {
      listA: [
        {
          id: 1,
          text: 'A1',
        },
        {
          id: 2,
          text: 'A2',
        },
        {
          id: 3,
          text: 'A3',
        },
        {
          id: 4,
          text: 'A4',
        },
        {
          id: 5,
          text: 'A5',
        },
        {
          id: 6,
          text: 'A6',
        },
        {
          id: 7,
          text: 'A7',
        },
        {
          id: 8,
          text: 'A8',
        },
        {
          id: 9,
          text: 'A9',
        },
      ],
      listB: [
        {
          id: 1,
          text: 'B1',
        },
        {
          id: 2,
          text: 'B2',
        },
        {
          id: 3,
          text: 'B3',
        },
        {
          id: 4,
          text: 'B4',
        },
        {
          id: 5,
          text: 'B5',
        },
        {
          id: 6,
          text: 'B6',
        },
        {
          id: 7,
          text: 'B7',
        },
        {
          id: 8,
          text: 'B8',
        },
        {
          id: 9,
          text: 'B9',
        },
      ],
    }
  },
}
</script>

<style scoped>
.dragList {
  overflow: auto;
}

.item {
  cursor: move;
  float: left;
  background: #fff;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  margin: 0 15px 15px 0;
  border: 1px solid #e6e6e6;
}

.dragList .sortable-ghost {
  opacity: 0.5;
}
</style>
